import { Node, Tips } from 'butterfly-dag'
import $ from 'jquery'

class BaseNode extends Node {
  [x: string]: any
  constructor(opts) {
    super(opts)
    this._on = opts._on
  }
  mounted() {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const _self = this
    //监听group展开和隐藏事件
    this.on('groupExpandEvent', (data) => {
      if (this.group == data.id) {
        if (data.expand) {
          $(this.dom).show()
          this.emit('nodeHideEvent', {
            hide: false,
            node: this
          })
        } else {
          $(this.dom).hide()
          this.emit('nodeHideEvent', {
            hide: true,
            node: this
          })
        }
      }
    })

    $(this.dom).on('contextmenu', (e) => {
      _self.emit('onNodeContextmenuEvent', _self)
      return false
    })
  }
  public draw = (data: any) => {
    const titleColor = data.options.titleColor || '#304fed'

    const color = data.options.color || '#20299e'

    const _container = `<div class= "base-node"  style="background:${color};border:1px solid ${color};"></div>`
    const container = $(_container)
      .css('top', data.top)
      .css('left', data.left)
      .css('width', data.options.width)
      .css('height', data.options.height)
      .attr('id', data.id)

    const _text = `<span class='text' style="background:${titleColor}"><i class="bi ${data.options.icon}"></i>&nbsp;${data.options.text}</span>`
    container.append(_text)

    return container[0]
  }
}
export default BaseNode
